<!--弹窗新增用户--新增角色-->
<style>
    .list-box .checkbox { width: 90px; margin-right: 15px; margin-bottom: 0px; }
    .tab a { border-bottom: 2px solid #dcdcdc; }
    .sel1 { border: 1px solid #d9d9d9; height: 30px; }
    button.ng-scope { border: 1px solid #ff7713; }
</style>
<div i="content" class="ui-dialog-content" ng-controller="RoleController">

    <div>
        <form ng-if="showIndex == 0" name="role_add_form" ng-init="setFormScope(this)" novalidate  style="width:535px;">
            <div class="step-num" style="position:relative;">
                <div class="num-fav"><a class="checked">1</a><span class="mt5 fl c-orange">创建角色</span></div>
                <div class="num-fav" style="left: 148px;"><a>2</a><span class="mt5 fl">功能授权</span></div>
                <div class="bottom-line" style="width: 160px;left:10px;"></div>
            </div>
            <table width="100%" class="mt10" style="margin-bottom: 30px;">
                <tbody>
                <tr>
                    <td align="left" class="form-cell w120 pt16" valign="top"><em class="c-red">*&nbsp;</em> 角色名称</td>
                    <td class="pt12">
                        <input type="text" name="js_role_name" id="js_role_name" class="input-text mr10 w400"
                               ng-model="roleInfo.roleName" required>

                        <p role="alert"
                           ng-show="(role_add_form.$submitted || role_add_form.js_role_name.$touched) && role_add_form.js_role_name.$error.required"
                           class="error ng-hide c-red lh30">
                            角色名称不能为空</p>
                    </td>
                </tr>
                <tr>
                    <td align="left" class="form-cell w120 pt16" valign="top"><em class="c-red">*&nbsp;</em> 标准角色分类
                    </td>
                    <td class="pt12">
                        <div class="w400 f12"
                             ui-combobox
                             data="[{value:'0',name:'集团级角色'},{value:'1',name:'公司级角色'}]"
                             text-field="name"
                             value-field="value"
                             ng-model="roleInfo.roleType"></div>

                        <p role="alert"
                           ng-show="(role_add_form.$submitted || role_add_form.js_role_type.$touched) && role_add_form.js_role_type.$error.required"
                           class="error ng-hide c-red lh30">
                            请选择角色类别</p>
                    </td>
                </tr>
                <tr>
                    <td align="left" class="form-cell w120 pt16" valign="top">&nbsp;&nbsp;&nbsp;角色说明</td>
                    <td class="pt12">
                    <textarea type="text" name="js_role_desc" id="js_role_desc" class="fl f14 mr10 w400"
                              style="border:1px solid #d9d9d9;"
                              ng-model="roleInfo.roleDesc" rows="3"/>
                    </td>
                </tr>
                </tbody>
            </table>
        </form>

        <div ng-if="showIndex == 1" style="height:500px;position: relative; width: 1080px; overflow: auto;">
            <div class="step-num" style="position:relative;">
                <div class="num-fav"><a class="checked">1</a><span class="mt5 fl c-orange">创建角色</span></div>
                <div class="num-fav" style="left: 148px;"><a class="checked">2</a><span class="mt5 fl c-orange">功能授权</span></div>
                <div class="bottom-line" style="width: 160px;left:10px;"></div>
            </div>
            <div class="grid-header clearfix" style="position: relative;">
                <span class="fl f14 lh30 text-indent">选择授权模块</span>

                <div class="tab-bottom-line"></div>
            </div>
            <div>
                <div class="mt10 tips-list list-box fl12 clearfix" align="left"
                     style="margin-left: 0px;">
                    <label class="checkbox" ng-repeat="app in apps">
                        <input type="checkbox" id="pop_edit_role_{{app.appCode}}-{{app.code}}"
                               name="pop_edit_role_{{app.appCode}}-{{app.code}}" ng-checked="app.selected"
                               ng-model="app.selected" ng-change="setAppSelect(app)">
                        <span>{{app.name}}</span>
                    </label>
                </div>
            </div>
            <div class="grid-header clearfix" style="position: relative;padding-bottom: 10px;">
                <span class="fl f14 lh30 text-indent">所选功能点</span>

                <span class="fr">
                    <a href="javascript:;"
                       ui-dialog="一键授权"
                       ui-dialog-data="{roles:roles}"
                       ui-dialog-ok="copyRoles($data.selects)"
                       ui-dialog-template="<div class='pb10 c-gray'>选择一个角色，把该角色权限复制到当前角色</div><div class='auto-tree' style='width:670px;height: 360px;' ng-role-tree roles='data.roles' selects='data.selects' multi='false'>加载中...</div>"
                       class="btn permission p-0000210201-06" id="btnAddGroup">一键授权</a></span>

                <div class="tab-bottom-line"></div>
            </div>
            <div class="tab f14  clearfix" ng-if="selectedApps && selectedApps.length>0">
                <ul>
                    <li ng-repeat="app in selectedApps" ng-class="{'tab-on':app.appCode == selectedTabAppCode}"
                        ng-click="setTabAppSelected(app)" style="height: 36px;">
                        <a href="javascript:;">{{app.name}}</a>
                    </li>
                </ul>
                <!--<div class="tab-bottom-line"></div>-->
            </div>



            <div class="mt10 text-center" style="margin-top: 40px;">
                <div ng-if="!functionActions || functionActions.length==0" class="mt50 text-center">请选择模块</div>

                <div ng-if="functionActions && functionActions.length>0">
                    <div ng-repeat="function0 in functionActions">
                        <div class="text-center" ng-repeat="function1 in function0.functions">
                            <div class="grid-header clearfix" style="position: relative;">
                                <span class="fl f14 text-indent mr10">{{function1.name}}</span>

                                <label class="checkbox fl">
                                    <input type="checkbox"
                                           ng-checked="function1.selected"
                                           data-ng-model="function1.selected"
                                           data-ng-change="updateActionGroup(function1)">
                                    <span>全部</span>
                                </label>
                            </div>
                            <div class="sheet">
                                <table width="100%" class="mt5" style="margin-bottom: 10px;">
                                    <tbody>
                                    <!--二级结构-->
                                    <tr ng-if="function1.actions && function1.actions.length>0">
                                        <td colspan="2">
                                            <div style="display:block">
                                                <div class="ml25 mt10 tips-list clearfix" align="left">
                                                    <label class="checkbox" ng-repeat="action in function1.actions"
                                                         style="margin-right: 20px;width: auto;">
                                                        <input type="checkbox"
                                                               ng-checked="action.selected"
                                                               ng-model="action.selected"
                                                               ng-change="updateAction(action,function1)">
                                                        <span>{{action.name}}</span>
                                                    </label>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <!--三级结构-->
                                    <tr ng-if="function1.functions && function1.functions.length>0"
                                        ng-repeat="function2 in function1.functions">
                                        <td width="150" height="34" class="bgcf2">{{function2.name}}</td>
                                        <td>
                                            <div style="display:block">
                                                <div ng-if="function2.actions && function2.actions.length>0"
                                                     class="ml25 mt10 tips-list clearfix" align="left">
                                                    <label class="checkbox" ng-repeat="action in function2.actions" style="width: 160px;">
                                                        <input type="checkbox"
                                                               ng-checked="action.selected"
                                                               ng-model="action.selected"
                                                               ng-change="updateAction(action,function1)">
                                                        <span>{{action.name}}</span>
                                                    </label>
                                                </div>

                                                <div ng-if="function2.functions && function2.functions.length>0"
                                                     class="ml25 mt10 tips-list clearfix" align="left">
                                                    <div class="checkbox"
                                                         ng-repeat="function3 in function2.functions">
                                                        <div>{{function3.name}}</div>
                                                        <label class="checkbox"
                                                             ng-repeat="action in function3.actions" style="width: 160px;">
                                                            <input type="checkbox"
                                                                   ng-checked="action.selected"
                                                                   ng-model="action.selected"
                                                                   ng-change="updateAction(action,function1)">
                                                            <span>{{action.name}}</span>
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="ui-dialog-button mt10">
            <button type="button" class="btn" ng-if="showIndex == 0" ng-click="next()">下一步</button>
            <button type="button" class="btn" ng-if="showIndex == 1" ng-click="pre()">上一步</button>
            <button type="button" class="btn" ng-if="showIndex == 1" ng-click="save()">保存</button>
            <button type="button" class="btn btn-gray" ng-click="cancel()">取消</button>
        </div>
    </div>
</div>